<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审计日志</title>
    <!--引入JQuery库-->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <!--引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div>
        <el-form :inline="true" :model="search" size="small" class="demo-form-inline">
            <el-form-item label="返回条数阈值">
                <el-input v-model="search.number" type="number" min="20" max="100000" step="1" placeholder="返回条数阈值" @blur="checkCount"></el-input>
            </el-form-item>
            <el-form-item label="模糊多选">
                <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请添加关键词" @change="handleChange">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
                <el-date-picker v-model="value1" type="datetimerange" :editable="false" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit()">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table v-loading="loading" :data="list" style="width: 100%" max-height="800" stripe border size="small" highlight-current-row :default-sort="{prop: 'date', order: 'descending'}" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#67C23A33">
        <el-table-column prop="msg-type" label="消息类型" width="80" align="center"></el-table-column>
        <el-table-column prop="date" label="日期" width="160" align="center"></el-table-column>
        <el-table-column prop="thread-id" label="线程ID" width="80" align="center"></el-table-column>
        <el-table-column prop="query-id" label="查询ID" width="80" align="center"></el-table-column>
        <el-table-column prop="user" label="用户" width="80" align="center"></el-table-column>
        <el-table-column prop="ip" label="IP" width="120" align="center"></el-table-column>
        <el-table-column prop="_os" label="操作系统" width="100" align="center"></el-table-column>
        <el-table-column prop="_client_name" label="客户端名称" width="100" align="center"></el-table-column>
        <el-table-column prop="_pid" label="PID" width="80" align="center"></el-table-column>
        <el-table-column prop="_client_version" label="客户端版本" width="90" align="center"></el-table-column>
        <el-table-column prop="_platform" label="平台" width="80" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" width="80" align="center"></el-table-column>
        <el-table-column prop="cmd" label="命令" width="150" align="left" header-align="center"></el-table-column>
        <el-table-column prop="query" label="查询"></el-table-column>
    </el-table>
    <div style="margin-top: 10px">
        返回条数：{{count}}
    </div>
    <div>
        <span style="color: red">*</span>
        <span>如果返回条数太少，请适量的增加返回条数阈值，范围【20, 100000】</span>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                count: 0,
                list: [],
                search: {
                    number: 20,
                    params: ""
                },
                options: [],
                value: [],
                value1: null
            }
        },
        mounted() {
            this.getAuditLog(this.search.number, this.search.params)
        },
        methods: {
            getAuditLog(number, params) {
                this.loading = true
                $.get("/list?count=" + number + "&params=" + params).then((res) => {
                    let list = JSON.parse(res.list)
                    let data = []
                    let count = 0
                    if (this.value1 == null) {
                        count = res.count
                        data = list
                    } else {
                        let datetimerange = this.value1
                        let timestamp1 = datetimerange[0].getTime()
                        let timestamp2 = datetimerange[1].getTime()
                        list.forEach(element => {
                            if (element.date >= timestamp1 && element.date <= timestamp2) {
                                count++
                                data.push(element)
                            }
                        })
                    }
                    data.forEach(element => {
                        let date = element.date
                        element.date = timestamp2date(date)
                    })
                    this.list = data
                    this.count = count
                    console.log(this.list)
                    this.loading = false
                })
            },
            checkCount() {
                if (this.search.number < 20 || this.search.number > 100000) {
                    this.$notify({
                        title: '返回条数阈值错误',
                        message: '返回条数阈值范围【20-100000】之间',
                        type: 'warning',
                        duration: 3000
                    })
                }
            },
            handleChange(arr) {
                if (arr.length > 3) {
                    this.value = this.value.filter((value,index,array) => {
                        return index != array.length - 1
                    })
                    this.$notify({
                        title: '模糊搜索',
                        message: '模糊搜索条件不能超过3个',
                        type: 'warning',
                        duration: 3000
                    })
                } else {
                    if (arr.length != 0) {
                        this.search.number = arr.length * 2 * 10000
                    } else {
                        this.search.number = 20
                    }
                }
            },
            onSubmit() {
                if (this.search.number >= 20 && this.search.number <= 100000) {
                    let arr = this.value
                    let value = ""
                    arr.forEach(element => {
                        value = value + element + ","
                    })
                    this.search.params = value.substring(0, value.length - 1)
                    this.getAuditLog(this.search.number, this.search.params)
                } else {
                    this.$message.error('返回条数阈值范围【20-100000】之间')
                }
            }
        }
    })
</script>

<script type="text/javascript">
    /**
     * 时间戳 --> YY-MM-DD hh:mm:ss
     * @param timestamp 字符串类型的时间戳
     * @returns {string} YY-MM-DD hh:mm:ss
     */
    function timestamp2date(timestamp) {
        let date = new Date(parseInt(timestamp))
        let Y = date.getFullYear()
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y  + '-' + M  + '-' + D  + ' ' + h + ':' + m + ':' + s
    }
</script>
</body>
</html>